<template>
    <!-- echarts图表 -->
    <div class="echarts-box">
      <div class="myChart"></div>
    </div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts';
  import { onMounted, onBeforeUnmount } from 'vue';
  
  let myChart;
  
  const initCharts = () => {
    // 基于准备好的 dom，初始化 echarts 实例
    myChart = echarts.init(document.querySelector('.myChart'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ようこそ！！'
      },
      tooltip: {},
      xAxis: {
        data: ['カード利用', '顧客数', '契約数', '会社', '自宅', '勤務先']
      },
      yAxis: {},
      series: [
        {
          name: '利用数',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  };
  
  const resizeCharts = () => {
    if (myChart) {
      myChart.resize();
    }
  };
  
  onMounted(() => {
    initCharts();
    window.addEventListener('resize', resizeCharts);
  });
  
  onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeCharts);
  });
  </script>
  
  <style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    background-color: #58779f;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .echarts-box {
    .myChart {
      width: 100%;
      height: 400px;
    }
  }
  </style>
  